<template>
  <div>
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#74787a"
        text-color="#cdd1c5"
        active-text-color="#ffd04b"
      >
        <el-menu-item class="logo"
          ><router-link to="/web">ONEBLOG</router-link></el-menu-item
        >
        <el-menu-item index="1" style="margin-left: 10px"
          ><router-link to="/web/home">博客</router-link></el-menu-item
        >
        <el-menu-item index="2"
          ><router-link to="/web/blogType">分类专栏</router-link></el-menu-item
        >
        <el-menu-item index="3"
          ><router-link to="/web/blogTag">标签</router-link></el-menu-item
        >
        <el-menu-item index="4"
          ><router-link to="/web/message">留言板</router-link></el-menu-item
        >
        <el-menu-item
          index="6"
          v-if="this.$router.currentRoute.path != '/web/blogSearch'"
          style="margin-right: 200px"
        >
          <div @click="goToSearch">
            <el-input size="small" placeholder="请输入内容" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
        </el-menu-item>
        <el-menu-item index="5" v-if="!flag"
          ><router-link to="/login">登录</router-link></el-menu-item
        >
        <el-menu-item index="6" v-if="flag" @click="toAdmin">
          {{ user.username }}</el-menu-item
        >
      </el-menu>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Head",
  data() {
    return {
      activeIndex: "",
      user: {
        id: "",
        username: "",
        avatar: "",
        created: "",
      },
      flag: false,
    };
  },
  props: ["aIndex"],
  mounted() {
    this.activeIndex = this.aIndex;
    if (localStorage.getItem("token")) {
      this.flag = true;
      this.axios.get("/sys/userInfo").then((res) => {
        this.user = res.data.data;
      });
    }
  },
  methods: {
    blogsearch(keyword) {
      console.log(keyword);
      this.$router.push("/web/blogSearch/" + keyword);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // this.activeIndex = key
    },
    goToSearch() {
      this.$router.push("/web/blogSearch");
    },
    toAdmin() {
      this.$message({
        showClose: true,
        message: "欢迎来到后台管理系统",
        type: "success",
      });
      this.$router.push("/");
    },
  },
};
</script>
  
  <style scoped>
/* logo */
.logo {
  margin-left: 150px;
  font-size: 30px;
  font-family: 华文行楷;
  color: #409eff !important;
}
</style>